<!DOCTYPE HTML>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:include="public/layout::header('授权菜单')" th:remove="tag"></div>
    <link rel="stylesheet" type="text/css" href="/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" method="post" action="" id="form-admin-add">
        <input type="hidden" id="role_id" th:value="${role_id}" />
        <div class="row cl">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input id="submitBtn" class="btn btn-primary radius" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;"/>
            </div>
        </div>
    </form>
</article>
<!--_footer 作为公共模版分离出去-->
<div th:include="public/layout::footer" th:remove="tag"></div>
<!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/lib/zTree/v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/lib/zTree/v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/lib/zTree/v3/js/jquery.ztree.exedit-3.5.js"></script>

<script type="text/javascript">
    $(function(){
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: onCheck
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"随意勾选 1", open:true},
            { id:11, pId:1, name:"随意勾选 1-1", open:true},
            { id:111, pId:11, name:"随意勾选 1-1-1"},
            { id:112, pId:11, name:"随意勾选 1-1-2"},
            { id:12, pId:1, name:"随意勾选 1-2", open:true},
        ];

        function onCheck() {
            
        }
        function getCheckedNodes() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var checkNodes=zTree.getCheckedNodes();
            return checkNodes;
        }

        function getMenus() {
            var  nodes=getCheckedNodes();
            var menus=[];
            $.each(nodes,function (index,node) {
                menus.push(node.id);
            });
            return menus;
        }


        $(document).ready(function(){
            loadMenus();
        });

        function loadMenus() {
            $.ajax({
                type: 'POST',
                url: 'getMenuByRole',
                dataType: 'json',
                data:{'role_id':$("#role_id").val()},
                success: function(data){
                    if(data.code==0){

                        zNodes=data.data;
                        $.each(zNodes,function (index,zNode) {
                            zNodes[index].open=true;
                            if(zNode.ischecked>=1){
                                zNodes[index].checked=true;
                            }
                        });
                        console.log(data.data);
                        console.log(zNodes);
                        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    }else{
                        layer.msg(data.msg,{icon:1,time:3000});
                    }

                },
                error:function(data) {
                    console.log(data.msg);
                }
            });
        }


        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });


        $("#submitBtn").click(function () {
            menus=getMenus();
            role_id=$("#role_id").val();
            console.log(role_id);
            console.log(menus);

            $.ajax({
                type: 'POST',
                url: 'setMenu',
                dataType: 'json',
                data:{'role_id':role_id,'menu_ids':menus},
                success: function(data){
                    if(data.code==0){
                        layer.msg(data.msg,{icon:1,time:3000},function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.location.reload();
                            parent.layer.close(index);

                        });
                    }else {
                        layer.msg(data.msg,{icon:1,time:3000});
                    }

                },
                error:function(data) {
                    layer.msg('网络请求失败，请检查!',{icon:1,time:3000});
                }
            });
        });
    });
</script>

</body>
</html>